Vue.js Methods |
您所在的位置：网站首页 › create method in type › Vue.js Methods |
Vue.js Methods
|
A Vue method is an object associated with the Vue instance. Functions are defined inside the methods object. Methods are useful when you need to perform some action with v-on directive on an element to handle events. Functions defined inside the methods object can be further called for performing actions. Syntax: methods : { // We can add our functions here }Syntax for single file components: export default { methods: { // We can add our functions here } }In the following examples, we use Vue.js to show the working of methods. Example 1: HTML {{title}} Title : {{name}} Topic : {{topic}} {{show()}} // Creating Vue Instance var vm = new Vue({ // Assigning id of DOM in parameter el: '#home', // Assigning values of parameter data: { title : "Geeks for Geeks", name : "Vue.js", topic : "Instances" }, // Creating methods methods : { // Creating function show: function(){ return "Welcome to this tutorial on " + this.name + " - " + this.topic; } } });
Output:
 Vue App
Example 2: HTML {{title}} Title : {{name}} Click me // Creating Vue Instance var vm = new Vue({ // Assigning id of DOM in parameter el: '#home', // Assigning values of parameter data: { title : "Geeks for Geeks", name : "Vue.js | Methods", }, // Creating methods methods : { // Creating function show: function(){ // Setting text in element document.getElementById("view") .innerHTML = "Hi, This is Vue" // Hiding text after 2 seconds setTimeout(() => { document.getElementById("view") .innerHTML = "" }, 2000); } } });
Output: Before clicking the button:  Before click After clicking the button: After click My Personal Notes arrow_drop_up |
【本文地址】